Amplify UIの新しいAuthenticatorコンポーネントを日本語化してみた

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

先日、下記エントリにて新しくリリースされたAmplify UIのAuthenticatorコンポーネントを試してみました。

このコンポーネントは国際化対応もしているようですので、今回は実際に日本語化を試してみたいと思います。

前提

下記のエントリで実施したAuthenticatorコンポーネントの表示までができていることを前提としています。

どうやって日本語化すれば良いのか？

ドキュメントを見てみると、対応方法としてはこれまでと同じ方法で対応できそうです。

• Authenticator | Configuration | Internationalization (I18n)

以下のようなコードで、I18n.putVocabulariesでtranslationsを読み込ませてから、I18n.setLanguageで言語設定をすれば良いようですね。

import { translations } from '@aws-amplify/ui';
I18n.putVocabularies(translations);
I18n.setLanguage('fr');

対応言語は、2021/11/25現在では以下の通りです。

• en – English (default)
• zh – Chinese
• fr – French
• de – German
• it – Italian
• ja – Japenese
• es – Spanish

日本語化してみる

では、実際にやってみます。

やろうとして私はすぐに躓いたのですが、今回利用するtranslationsは@aws-amplify/uiに含まれています。

そのため、以下のように追加でパッケージをインストールする必要がありました。

% yarn add @aws-amplify/ui

インストールができたらあとは簡単です。先日作成したコードに言語切替のコードを追加します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import Amplify from 'aws-amplify';
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { environment } from '../environments/environment';
Amplify.configure(environment.amplify);

import { I18n } from 'aws-amplify';
import { translations } from '@aws-amplify/ui';
I18n.putVocabularies(translations);
I18n.setLanguage('ja');

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AmplifyAuthenticatorModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

表示してみる

では、実際に表示してみましょう。

% yarn start

日本語化されました！簡単に日本語化できるはありがたいですね。

いくつか表示を試してみます。

入力チェック時のメッセージもきちんと日本語化されています。一方で、サーバー側からのエラーメッセージはそのまま英語表記になっていますね。

クライアント側はUIコンポーネントの責務として対応してあり、サーバー側からのメッセージには関与しないという切り分けになっていると思われます。

おまけ

CommonJS or AMD dependencies のWarning

@aws-amplify/uiを追加インストールしたことで、CommonJS or AMD dependencies のWarningが新たに表示されます。

気になる場合には下記のとおりangular.jsonに追記すると警告表示を抑制できます。

(...snip...)
            "allowedCommonJsDependencies": [
              (...snip...)
              "style-dictionary/lib/utils/deepExtend",
              "style-dictionary/lib/utils/flattenProperties",
              "style-dictionary/lib/utils/references/usesReference"
            ]
(...snip...)

サーバー側メッセージの翻訳に関する考察

サーバー側からのメッセージは、以前はtranslationsに以下のように追加をすることで翻訳することもできましたが、2021/11/25現在では対応されていなさそうです。

I18n.putVocabulariesForLanguage('ja', {
  'User does not exist.': 'ユーザーが存在しません',
});

おそらく以下のコードのerrorメッセージ処理まわりでI18n対応を組み込むと翻訳できそうですが、現時点では出来るか分かりませんでした。また、何か分かれば追記したいと思います。

• amplify-ui/authenticator.service.ts at main · aws-amplify/amplify-ui

まとめ

以上、Amplify UIの新しいAuthenticatorコンポーネントを日本語化してみました。

日本語のディクショナリが用意されており、以前に比べてとても簡単に日本語化できて便利になったと感じました。

サーバー側からのメッセージについては、今回は日本語化できませんでしたが、なにかユーザー側で対処できる方法があれば試してみたいと思います。

どなたかのお役に立てば幸いです。それでは！